<template>
  <div class="main" v-loading="pageLoading" element-loading-text="加载中">
    <div class="nav">
      <div class="breadcrumb">
        <el-breadcrumb separator="/">
          <el-breadcrumb-item
            :to="{ path: '/data-converge/indicator-manage-special' }"
            >列表</el-breadcrumb-item
          >
          <el-breadcrumb-item>指标体系详情</el-breadcrumb-item>
        </el-breadcrumb>
      </div>
    </div>
    <div class="content">
      <div class="content-main">
        <span class="base-info-title">基本信息：</span>
        <div class="base-info">
          <!-- <el-descriptions :column="3" border size="medium">
            <el-descriptions-item>
              <template slot="label">
                指标体系名称
              </template>
              {{ indicatorSystemInfo.name }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                体检城市
              </template>
              {{ indicatorSystemInfo.area }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                体检年份
              </template>
              {{ indicatorSystemInfo.year + '年' }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                指标体系说明
              </template>
              {{ indicatorSystemInfo.describe }}
            </el-descriptions-item>
          </el-descriptions> -->
          <el-form label-position="left" inline class="demo-table-expand">
            <el-form-item label="指标体系名称">
              <span>{{ indicatorSystemInfo.name }}</span>
            </el-form-item>
            <el-form-item label="体检城市">
              <span>{{ indicatorSystemInfo.area }}</span>
            </el-form-item>
            <el-form-item label="体检年份">
              <span>{{ indicatorSystemInfo.year + '年' }}</span>
            </el-form-item>
            <el-form-item label="指标体系说明">
              <span>{{ indicatorSystemInfo.describe }}</span>
            </el-form-item>
          </el-form>
        </div>
        <el-divider></el-divider>
        <span class="indicator-tree-title">指标体系：</span>
        <div class="indicator-list">
          <div class="indicator-list-left">
            <el-tree
              :data="dimensionTree"
              node-key="id"
              ref="tree"
              class="dimension-tree"
              :highlight-current="true"
              :default-expand-all="true"
              :expand-on-click-node="false"
              empty-text="暂无维度数据"
              @node-click="handleNodeClick"
              :props="{
                label: 'label',
              }"
            >
              <span class="custom-tree-node" slot-scope="{ node, data }">
                <div class="custom-tree-node-title">
                  <img v-if="data.hasOwnProperty('icon')" :src="data.icon" />
                  <img
                    v-else
                    src="../../../assets/index.png"
                    style="width: 15px; height: 15px"
                  />
                  <!-- <span v-else style="width: 7px"></span> -->
                  <span :title="node.label">{{ node.label }}</span>
                </div>
              </span>
            </el-tree>
          </div>
          <div class="indicator-list-divider"></div>
          <div
            class="indicator-list-right"
            v-loading="infoLoading"
            element-loading-text="加载中"
          >
            <template
              v-if="
                currentNodeInfo.hasOwnProperty('pkid') &&
                !currentNodeInfo.hasOwnProperty('children')
              "
            >
              <el-descriptions
                :column="1"
                border
                size="medium"
                :labelStyle="{ width: '150px' }"
              >
                <el-descriptions-item>
                  <template slot="label"> 指标释义 </template>
                  {{ currentNodeInfo.introduction }}
                </el-descriptions-item>
                <el-descriptions-item>
                  <template slot="label"> 指标类型 </template>
                  {{ currentNodeInfo.indexType }}
                </el-descriptions-item>
                <el-descriptions-item>
                  <template slot="label"> 评价标准 </template>
                  {{ currentNodeInfo.standard }}
                </el-descriptions-item>
                <el-descriptions-item>
                  <template slot="label"> 评价类型 </template>
                  {{ currentNodeInfo.standardType }}
                </el-descriptions-item>
                <el-descriptions-item>
                  <template slot="label"> 参考值 </template>
                  {{ currentNodeInfo.referenceValue }}
                </el-descriptions-item>
                <el-descriptions-item>
                  <template slot="label"> 指标单位 </template>
                  {{ currentNodeInfo.indexUnit }}
                </el-descriptions-item>
                <el-descriptions-item>
                  <template slot="label"> 关联指标名称 </template>
                  {{ currentNodeInfo.relevanceIndicatorName }}
                </el-descriptions-item>
              </el-descriptions>
            </template>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getQuotaByPkid, queryIndicator } from '@api/indicator-manage'

export default {
  components: {},
  data() {
    return {
      pageLoading: false,
      infoLoading: false,
      id: '',
      indicatorSystemInfo: {},
      dimensionTree: [],
      currentNodeInfo: {},
      indicatorTypeOptions: [
        {
          value: 0,
          label: '基本指标',
        },
        {
          value: 1,
          label: '特色指标',
        },
        {
          value: 2,
          label: '补充指标',
        },
      ],
      evaluationTypeOptions: [
        {
          value: 0,
          label: '底线型',
        },
        {
          value: 1,
          label: '目标型',
        },
        {
          value: 2,
          label: '区间型',
        },
      ],
      resArr: [],
    }
  },
  computed: {},
  methods: {
    transformTree(data) {
      return data.map((dimension) => {
        return {
          icon: dimension.icon,
          label: dimension.name,
          id: dimension.pkid,
          children: dimension.indexDataInfoList.map((indicator) => {
            return {
              ...indicator,
              indexType: this.indicatorTypeOptions.find(
                (item) => item.value === indicator.indexType
              )?.label, // 指标类型
              standardType: this.evaluationTypeOptions.find(
                (item) => item.value === indicator.standardType
              )?.label, // 评价类型
              label: indicator.name,
              id: indicator.pkid,
            }
          }),
        }
      })
    },
    handleNodeClick(data) {
      // 判断指标还是维度节点
      if (data?.icon) {
        // 维度
        this.currentNodeInfo = data
      } else {
        // 指标
        this.infoLoading = true
        queryIndicator(data.id).then((res) => {
          if (res.success) {
            this.currentNodeInfo = {
              ...res.data,
              indexType: this.indicatorTypeOptions.find(
                (item) => item.value == res.data.indexType
              )?.label, // 指标类型
              standardType: this.evaluationTypeOptions.find(
                (item) => item.value == res.data.standardType
              )?.label, // 评价类型
              label: res.data.name,
              id: res.data.pkid,
              relevanceIndicatorName: res.data.relationIndexInfo
                ? res.data.relationIndexInfo.map((item) => item.name).join(',')
                : null,
            }
            this.infoLoading = false
          }
        })
      }
    },
    //获取第一个默认子节点
    getFirstChild(arr) {
      for (let i = 0; i < arr.length; i++) {
        if (this.resArr[0]) {
          break
        }
        if (!arr[i].children) {
          this.resArr.push(arr[i])
          break
        } else {
          this.getFirstChild(arr[i].children)
        }
      }
      return this.resArr[0]
    },
  },
  created() {
    this.pageLoading = true
    this.id = this.$route.params.id
    getQuotaByPkid(this.id).then((res) => {
      if (res.success) {
        this.indicatorSystemInfo = res.data
        if (res.data.children) {
          this.dimensionTree = this.transformTree(res.data.children)
        }
        this.pageLoading = false
      }
      if (this.getFirstChild(this.dimensionTree)) {
        this.handleNodeClick(this.getFirstChild(this.dimensionTree))
        //默认高亮第一个可选中的节点
        setTimeout(() => {
          this.$refs.tree.setCurrentKey(this.resArr[0].id)
        }, 100)
      }
    })
  },
}
</script>

<style lang="scss" scoped>
.indicator-list {
  height: 80%;
}
.dimension-tree {
  margin-top: 20px;
  .custom-tree-node {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 15px;
    padding-right: 8px;
    .custom-tree-node-title {
      display: flex;
      align-items: center;
      line-height: 24px;
      img {
        width: 20px;
        fill: #c0c4cc;
        display: inline-block;
        margin-right: 5px;
      }

      span {
        width: 20rem;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        cursor: pointer;
      }
    }
  }
}
i {
  font-style: normal;
  color: red;
}

.icon + .icon {
  margin-left: 20px;
}
.bgc-gray {
  background-color: gray;
}
.main {
  width: 100%;
  height: 100%;
  background-color: #f4f8fe;
}
.nav {
  height: 55px;
  background: #ffffff;
  box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.1);
  border-radius: 2px;
  .breadcrumb {
    height: 55px;
    padding-left: 25px;
    padding-top: 23px;
    box-sizing: border-box;
  }
  .divider {
    height: 1px;
    background: #e7f0ff;
    border-radius: 1px 1px 0px 0px;
  }
}

.content {
  width: 100%;
  position: absolute;
  top: 55px;
  // right: 0;
  bottom: 0;
  .divider {
    height: 1px;
    background: #e7f0ff;
    border-radius: 1px 1px 0px 0px;
  }
  .content-main {
    height: calc(100% - 50px);
    background: #ffffff;
    box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.1);
    border-radius: 2px;
    padding: 25px;
    overflow: scroll;
    .base-info-title {
      position: relative;
      margin-left: 11px;
      height: 21px;
      font-size: 15px;
      &::before {
        content: '';
        width: 7px;
        height: 7px;
        background: #10a6dd;
        border-radius: 50%;
        margin-right: 4px;
        display: inline-block;
        position: absolute;
        top: 50%;
        left: -11px;
        transform: translateY(-50%);
      }
    }
    .indicator-tree-title {
      position: relative;
      margin-left: 11px;
      font-size: 15px;
      &::before {
        content: '';
        width: 7px;
        height: 7px;
        background: #10a6dd;
        border-radius: 50%;
        margin-right: 4px;
        display: inline-block;
        position: absolute;
        top: 50%;
        left: -11px;
        transform: translateY(-50%);
      }
    }
    .indicator-list {
      height: 60%;
      width: 100%;
      display: flex;
      &-left {
        flex: 2.5;
        border: 1px solid #eaedf6;
        margin: 20px 20px 0px 0px;
        overflow: scroll;
        &-top {
          height: 15%;
          width: 100%;
          display: flex;
          align-items: center;
          // justify-content: center;
          box-sizing: border-box;
          padding-left: 23px;
        }
        &-bottom {
          height: 100%;
          width: 100%;
          overflow: scroll;
          padding: 11px 5px;
          box-sizing: border-box;
        }
        &-divider {
          width: 100%;
          height: 1px;
          background: #e7f0ff;
          border-radius: 1px 1px 0px 0px;
        }
      }
      &-right {
        flex: 7;
        box-sizing: border-box;
        padding: 11px 27px;
        position: relative;
        .el-descriptions {
          position: absolute;
          left: 50%;
          top: 50%;
          width: calc(100% - 54px);
          transform: translate(-50%, -50%);
          ::v-deep
            .el-descriptions--medium.is-bordered
            .el-descriptions-item__cell {
            padding: 13px;
          }
        }
        // display: flex;
        // align-items: center;
        // justify-content: center;
        .el-input {
          width: 100%;
        }
        .el-cascader {
          width: 100%;
        }
        .el-select {
          width: 100%;
        }
      }
      &-divider {
        width: 1px;
        height: 100%;
        background: #e7f0ff;
        border-radius: 0px 1px 1px 0px;
      }
    }
  }
}
.flex-end {
  display: flex;
  justify-content: flex-end;
}
.demo-table-expand {
  font-size: 0;

  ::v-deep .el-form-item__label {
    width: 120px;
    color: #99a9bf;
  }
}

.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 100%;
}
::v-deep .el-descriptions--medium.is-bordered .el-descriptions-item__cel {
  width: 100px;
}

::v-deep {
  .el-tree-node__content {
    height: 40px;
  }
}
</style>
